//统计详情
<template>
	<view class="content">
		<!-- 第一部分时间 -->
		<view class="time">
			<view class="time_span">
				下单时间：
			</view>
			<view class="time_main">
				<view class="" @click="show = true">
					2020.07.03
				</view>
				至
				<view class="" @click="show = true">
					2020.07.10
				</view>
				<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
			</view>
		</view>
		<!-- 第二部分搜索条件 -->
		<view class="search">
			<!-- 用户名 -->
			<view class="username">
				<view class="span">
					用户名:
				</view>
				<input type="text" value="" placeholder="请输入用户名" />
			</view>
			<!-- 电话 -->
			<view class="username">
				<view class="phone_span">
					电话:
				</view>
				<input class="phone" type="text" value="" placeholder="请输入电话" />
			</view>
		</view>
		<!-- 第三部分搜索条件 -->
		<view class="condition">
			<view class="button">
				搜索
			</view>
			<view class="button">
				重置
			</view>
		</view>
		<!-- 第四部分列表 -->
		<view class="list">
			<view class="amount">
				<view class="order">
					订单数量：100
				</view>
				<view class="transaction">
					交易金额：100元
				</view>
			</view>

			<view class="msg">
				<view class="title">
					<view class="goods">
						订单号
					</view>
					<view class="goods">
						商品数量
					</view>
					<view class="goods">
						下单时间
					</view>
					<view class="goods">
						客户姓名
					</view>
					<view class="goods">
						电话
					</view>
				</view>
				<view class="data" v-for="(item,index) in orderList" :key="index">
					<view class="data_msg">
						12212
					</view>
					<view class="data_msg">
						11
					</view>
					<view class="data_num">
						2020.10.10
						11:11:11
					</view>
					<view class="data_msg">
						张三
					</view>
					<view class="data_num phone">
						13112341234
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
				date: '',
				show: false,
				mode: 'range',
				startDate:'',
				endDate:''
			};
		},
		methods: {
			change(e){
				console.log(e)
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 750rpx;
		height: auto;

		.time {
			width: 750rpx;
			display: flex;
			.time_span {
				width: 160rpx;
				height: 48rpx;
				color: rgba(80, 80, 80, 1);
				font-size: 32rpx;
				line-height: 150%;
				text-align: left;
				margin-left: 16rpx;
				margin-top: 6rpx;
			}
			.time_main{
				width: 568rpx;
				height: 62rpx;
				display: flex;
				justify-content: space-around;
				color: rgba(80, 80, 80, 1);
				background-color: rgba(233, 229, 229, 1);
				font-size: 28rpx;
				line-height: 62rpx;
				text-align: center;
			}
		}

		.search {
			display: flex;

			.username {
				display: flex;
				justify-content: space-evenly;
				color: rgba(80, 80, 80, 1);
				font-size: 32rpx;
				line-height: 48rpx;
				text-align: left;
				margin-top: 28rpx;

				.span {
					width: 140rpx;
					height: 48rpx;
					color: rgba(80, 80, 80, 1);
					font-size: 32rpx;
					line-height: 60rpx;
					text-align: left;
					margin-left: 40rpx;
				}

				.phone_span {
					width: 98rpx;
					height: 48rpx;
					color: rgba(80, 80, 80, 1);
					font-size: 32rpx;
					line-height: 60rpx;
					text-align: left;
					margin-left: 14rpx;
				}

				.phone {
					width: 236rpx;
					height: 56rpx;
					text-indent: 10rpx;
					color: rgba(51, 51, 51, 1);
					border-radius: 4rpx;
					font-size: 24rpx;
					line-height: 60rpx;
					border: rgba(153, 153, 153, 1) solid 2rpx;
					text-align: left;
				}

				input {
					width: 208rpx;
					height: 54rpx;
					text-indent: 10rpx;
					color: rgba(51, 51, 51, 1);
					border-radius: 4rpx;
					font-size: 24rpx;
					line-height: 60rpx;
					border: rgba(153, 153, 153, 1) solid 2rpx;
					text-align: left;
				}
			}
		}

		.condition {
			margin-top: 36rpx;
			padding-bottom: 26rpx;
			border-bottom: 2rpx solid rgba(80, 80, 80, 1);
			width: 750rpx;
			display: flex;
			justify-content: space-evenly;

			.button {
				width: 108rpx;
				height: 60rpx;
				color: rgba(255, 255, 255, 1);
				background-color: rgba(153, 153, 153, 1);
				border-radius: 8rpx;
				font-size: 28rpx;
				line-height: 60rpx;
				text-align: center;
			}
		}

		.list {
			.amount {
				width: 750rpx;
				height: auto;
				display: flex;
				justify-content: space-around;
				margin-top: 12rpx;

				.order {
					width: 320rpx;
					height: 60rpx;
					color: rgba(80, 80, 80, 1);
					font-size: 40rpx;
					line-height: 150%;
					text-align: left;
				}

				.transaction {
					width: 320rpx;
					height: 60rpx;
					color: rgba(80, 80, 80, 1);
					font-size: 40rpx;
					line-height: 150%;
					text-align: left;
				}
			}

			.msg {
				width: 750rpx;
				height: 826rpx;
				overflow-x: scroll;
				margin-top: 10rpx;

				.title {
					display: flex;
					justify-content: space-between;

					.goods {
						width: 150rpx;
						color: rgba(80, 80, 80, 1);
						font-size: 30rpx;
						line-height: 150%;
						text-align: center;
					}
				}

				.data {
					display: flex;
					justify-content: space-between;
					margin-top: 16rpx;
					margin-bottom: 40rpx;

					.data_msg {
						width: 150rpx;
						color: rgba(80, 80, 80, 1);
						font-size: 30rpx;
						line-height: 150%;
						text-align: center;
					}

					.data_num {
						width: 150rpx;
						color: rgba(80, 80, 80, 1);
						font-size: 20rpx;
						line-height: 150%;
						text-align: center;
					}

					.phone {
						width: 190rpx;
					}
				}
			}
		}
	}
</style>
